<template>
    <div id="star-pic-vue">
        <div v-if="data.length>0" style="padding:5px 0; clear:both;">附件：</div>
        <div>
        <el-image v-for="item in images" :key="item.url" class="img-vi"
                 :src="item.url" :preview-src-list="getImgList()"
                />
        </div>
                 <!--
            <template v-if="isDialogShow">
        </template>
            <el-dialog
                :visible.sync="centerDialogVisible"
                modal
                close-on-click-modal
                custom-class="dialog"
                width="90%"
                >
                <el-carousel :autoplay="false" arrow="always">
                    <el-carousel-item v-for="item in data" :key="item.url">
                        <img :src="item.url" style="max-width:100%; width:100%; height:auto;">
                    </el-carousel-item>
                </el-carousel>
            </el-dialog>
        </template>  -->
    </div>
</template>

<script>
    export default {
        name: "star-pic-list",
        props: ["data","maxShow"],
        data(){
            return{
                centerDialogVisible: false,
                showPic: '',
                isDialogShow: false,
                index: 0,
            }
        },
        computed: {
          images() {
                  return this.data
          }
        },
        methods: {
            getImgList(){
                let res = []
                for(let img of this.images){
                    res.push(img.url);
                }
                return res;
            },
            // 放大图片
            enlargePic(e){
                this.isDialogShow = true;
                this.centerDialogVisible = true;
                this.showPic = this.data[0];
                console.log(this.images)
            },
        }
    }
</script>

<style lang="scss">
  .img-vi{
    width: 70px; height: 70px; border:lightgray 1px solid; margin:2px; padding:2px;
  }
</style>
